<template>
    <base-breadcrumb>
        <a-row :gutter="10">
            <a-col>
                <searchData :searchData="searchArr" @search="handleSearch"></searchData>
                <a-card class="mb20">
                    <div class="pub-table-action-btn">
                        <a-button icon="plus" class="btn_right" type="primary" @click="handleAddEdit({},1)" >新增</a-button>
                        <!--<a-button icon="download" type="primary">导出</a-button>-->
                    </div>
                    <!--a-table多选-->
                    <!--<div class="pub-table-select-count">-->
                    <!--<a-icon type="info-circle" theme="twoTone"/>已选择{{ chooseData }}项-->
                    <!--</div>-->
                    <!--:row-selection="{onChange: onSelectChange }"-->
                    <a-table
                            :pagination="pagination"
                            :columns="columns"
                            :data-source="tableData"
                            row-key="id"
                    >
                        <template slot="operation" slot-scope="text, record, index">
                            <div class="pub-table-list-action">
                                <span @click="handleAddEdit(record,2)">编辑</span>
                                <span @click="handleDeleteWarning(record)">删除</span>
                            </div>
                        </template>
                    </a-table>
                </a-card>
            </a-col>
        </a-row>
        <addEditRole :visible="visible" :formModelData="formModelData" :roleIndex="roleIndex" @handleCancel="handleCancel"></addEditRole>
    </base-breadcrumb>
</template>

<script>
  import { searchArr, columns } from './model'
  import addEditRole from './addEditRole'
  import { getRoleManageList, getPointDomains, deleteRoleList } from '@/api/system/system'
  export default {
    name: 'roleManage',
    components: {
      addEditRole,
    },
    data(){
      return{
        //密码重置
        visible:false,
        formModelData:{},
        searchArr: searchArr,
        columns: columns,
        chooseData: 0,
        tableData:[],
        roleIndex: 1,

        pagination:{
          defaultCurrent: 1, // 默认当前页数
          defaultPageSize: 10, // 默认当前页显示数据的大小
          total: 0, // 总数，必须先有
          showSizeChanger: true,
          showQuickJumper: true,
          pageSizeOptions: ["5", "10", "15", "20"],
          showTotal: (total) => `共 ${total} 条`, // 显示总数
          onShowSizeChange: (current, pageSize) => {
            this.pagination.defaultCurrent = 1;
            this.pagination.defaultPageSize = pageSize;
          },
          // 改变每页数量时更新显示
          onChange: (current, size) => {
            this.pagination.defaultCurrent = current;
            this.pagination.defaultPageSize = size;
          },

        }
      }
    },
    created(){
      this.handleSearch()
    },
    mounted(){
    },
    methods:{
      /**
       *@desc  table表格搜索
       *@param {}
       */
      handleSearch(val){
        this.handleTable(val);
      },
      /**
       *@desc  table表格列表 获取
       *@param {}
       */
      handleTable(params) {
        let _this = this;
        let searchData = {pageIndex:_this.pagination.defaultCurrent, pageSize:_this.pagination.defaultPageSize, ...params}
        getRoleManageList(searchData).then(res => {
          if (res.status === 200) {
            _this.pagination.total = res.data.total;
            _this.tableData=res.data.list
          }
        })
      },
      /**
       *@desc  table表格选中
       *@param {}
       */
      onSelectChange(selectedRowKeys, selectedRows) {
        let _this = this;
        _this.selectId = []
        selectedRows.map(item => {
          // 选中id
          _this.selectId.push(item.id);
        });
        this.chooseData = this.chooseData + selectedRows.length;
      },
      /**
       *@desc  table新增和编辑
       *@param {}
       */
      handleAddEdit(record, index){
        this.visible = true
        this.roleIndex = index
        if(index === 2){
          this.formModelData = record
        }
      },
      /**
       *@desc  table列表删除
       *@param {}
       */
      handleDeleteWarning(record){
        let _this=this
        _this.$confirm({
          title: `此操作将永久删除${record.name}，是否继续？`,
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            _this.handleDelete(record)
          },
          onCancel() {
          },
        });
      },

      handleDelete(record){
        deleteRoleList(record).then(res => {
          if(res.status === 200) {
            //删除成功
            this.$message.success('删除成功！')
            this.handleCancel()
          }
        }).catch(err => {
          //删除失败
          console.log(err)
        })
      },
      handleCancel(){
        this.visible =false;
        this.handleSearch()
      }
    },
  }
</script>

